<template>
	<view class="add">
		<u-form labelWidth="90" labelPosition="top" :model="model" :rules="rules" ref="form1">


			<u-form-item label="文章标题" prop="title" borderBottom="false" ref="item1">
				<u-input placeholder="请输入标题" v-model="model.title" border="none" clearable>
				</u-input>
			</u-form-item>


			<u-form-item label="攻略地区" prop="local" borderBottom="false" @click="pickerShow = true;" ref="item1">
				<u-input v-model="local" disabled disabledColor="#f5f5f5" placeholder="请选择地区" border="none"
					suffixIcon="arrow-down" suffixIconStyle="color: #909399">
				</u-input>
			</u-form-item>


			<u-form-item label="选择类型" prop="model.type" borderBottom="false" ref="item1">
				<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
					<u-radio activeColor="#6c5ddc" :customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
						@change="radioChange(item.name)" size="20">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="输入正文" prop="model.articleContent" borderBottom="false" ref="item1">
				<editor class="myEdit" placeholder="写点什么吧~~" show-img-size show-img-toolbar show-img-resize
					@ready="onEditReady" @focus="onFocus" @statuschange="onStatusChange">
				</editor>
			</u-form-item>


		</u-form>
		<u-action-sheet :show="pickerShow" :actions="columns" title="请选择地区" @close="pickerShow = false"
			@select="localSelect"></u-action-sheet>
		<view class="item">
			<button @click="onSubmit" type="submit" :disabled="!model.title.length " hover-class="checkActive"
				hover-stay-time="500">确认发表</button>
		</view>

		<view class="copyright">
			州游黔程提供计算服务<br />
			COPYRIGHT©2022-2023<br />
			ZhouYouQianCheng
		</view>
		<view class="tools" v-if="toolShow">
			<view class="" @click="clickHead()">
				<text class="iconfont icon-biaotizhengwenqiehuan" :class="headShow ? 'active':''"></text>
			</view>
			<view class="" @click="clickBold()">
				<text class="iconfont icon-fuhao-jiacu" :class="boldShow ?'active' : ''"></text>
			</view>
			<view class="" @click="clickItalic()">
				<text class="iconfont icon-T-qingxie" :class="italicShow ?'active':''"></text>
			</view>

			<view class="" @click="clickDivider()">
				<text class="iconfont icon-a-ziyuan13"></text>
			</view>
			<view class="" @click="clickInsertImage()">
				<text class="iconfont icon-tupian"></text>
			</view>
			<view class="" @click="editOk()">
				<u-icon name="checkmark"></u-icon>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getImeSrc,
		getProvince
	} from "@/utils/tools.js";

	const db = uniCloud.database();
	export default {
		data() {
			return {
				headShow: false,
				toolShow: false,
				boldShow: false,
				italicShow: false,
				local: '',
				model: {
					title: '', //文章标题

					recommend: 0, //推荐字段   0为不推荐 1为推荐   后台审核默认不推荐

					type: '黔俗', //选择类型 为数字（黔俗，亲子游等）

					localCode: '', //选择地区

					thumbnail: '', //缩略图

					introduction: '', //文章导读

					articleContent: '', //正文

					city: '' //文章发布时所在作者城市的地点
				},
				rules: {
					'title': {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
				},
				artObj: {
					title: '',
					introduction: '',
					articleContent: '',
					thumbnail: '',
					funtype: '',
					local: '',
					city: '', //文章发布时所在作者城市的地点
				},
				pickerShow: false,
				columns: [ //贵州省城市数组  索引值为地区代码
					// ['贵州', '贵阳', '遵义', '六盘水', '安顺', '毕节', '铜仁', '黔西南', '黔东南', '黔南']
					{
						name: '贵阳',
					},
					{
						name: '遵义',
					},
					{
						name: '六盘水'
					},
					{
						name: '安顺',
					},
					{
						name: '毕节',
					},
					{
						name: '铜仁',
					},
					{
						name: '黔西南',
					},
					{
						name: '黔东南',
					},
					{
						name: '黔南',
					},
				],
				radiolist1: [{
						name: '黔俗',
						disabled: false
					},
					{
						name: '黔趣',
						disabled: false
					},
					{
						name: '黔味',
						disabled: false
					}, {
						name: '亲子游',
						disabled: false
					}, {
						name: '田园游',
						disabled: false
					}, {
						name: '自驾游',
						disabled: false
					}
				],
				radiovalue1: '黔俗',
			};
		},
		onLoad() {

			getProvince().then(res => {
				// console.log(res, 999);
				this.model.city = res
			})
		},
		// 监听页面滑动距离的
		// onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
		// 	console.log("滚动距离为：" + e.scrollTop);
		// },
		methods: {
			// 点击提交按钮
			onSubmit() {

				// console.log(888);
				this.editorCtx.getContents({
					success: res => {
						this.model.introduction = res.text.slice(0, 50)
						this.model.articleContent = res.html
						this.model.thumbnail = getImeSrc(res.html, 1)
						// console.log(this.model, 3535);
						this.artObj.title = this.model.title
						this.artObj.introduction = this.model.introduction
						this.artObj.articleContent = res.html
						this.artObj.thumbnail = getImeSrc(res.html, 1)
						this.artObj.city = this.model.city
						this.artObj.funtype = this.model.type
						this.artObj.local = this.local
						uni.showLoading({
							title: "发布中..."
						})


						this.addData();
					}
				})
			},

			addData() {
				db.collection("zyqc_art").add({
					// ...this.model
					...this.artObj
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: "发布成功"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 800)
				})
			},
			// 自定义富文本组件初始化
			onEditReady() {
				uni.createSelectorQuery().in(this).select('.myEdit').fields({
					size: true,
					context: true
				}, res => {
					this.editorCtx = res.context
				}).exec()
			},
			// 监听输入的内容的样式
			checkStatus(name, detail, obj) {
				if (detail.hasOwnProperty(name)) {
					this[obj] = true;
				} else {
					this[obj] = false;
				}
			},
			goIndexPage() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 当样式发生改变的时候
			onStatusChange(e) {
				let detail = e.detail;
				this.checkStatus("header", detail, "headShow");
				this.checkStatus("bold", detail, "boldShow");
				this.checkStatus("italic", detail, "italicShow");
			},
			// 添加图像
			clickInsertImage() {
				uni.chooseImage({
					sizeType: ["compressed"],
					success: async res => {
						uni.showLoading({
							title: "上传中 请稍后~",
							mask: true //可以防止用户在上传的时候点击其他
						});
						for (let item of res.tempFiles) {
							if (item.name) {
								var cloudName = item.name
							} else {
								var cloudName = item.path.substring(11, item.path.length)
							}
							let res = await uniCloud.uploadFile({
								filePath: item.path,
								cloudPath: cloudName
							})
							this.editorCtx.insertImage({
								src: res.fileID
							})
						}
						uni.hideLoading()
					}

				})
			},
			// 添加分割线
			clickDivider() {
				this.editorCtx.insertDivider();
			},
			// 添加大标题
			clickHead() {
				this.headShow = !this.headShow
				this.editorCtx.format('header', this.headShow ? 'H2' : false)
			},
			// 设置加粗
			clickBold() {
				this.boldShow = !this.boldShow
				this.editorCtx.format('bold')
			},
			// 设置倾斜
			clickItalic() {
				this.italicShow = !this.italicShow
				this.editorCtx.format('italic')
			},
			// 控制下面操作栏的显示，离开焦点
			onFocus() {
				this.toolShow = true
			},
			editOk() {
				this.toolShow = false
			},
			// jin富文本插件点击事件
			// editOk(res) {
			// 	console.log(res);
			// },
			localSelect(e) {
				// console.log(e, 999);
				this.local = e.name
				// this.artObj.local = e.name
				// if (e.name === '贵阳') {
				// 	this.model.localCode = 1
				// } else if (e.name === '遵义') {
				// 	this.model.localCode = 2
				// } else if (e.name === '六盘水') {
				// 	this.model.localCode = 3
				// } else if (e.name === '安顺') {
				// 	this.model.localCode = 4
				// } else if (e.name == '毕节') {
				// 	this.model.localCode = 5
				// } else if (e.name == '铜仁') {
				// 	this.model.localCode = 6
				// } else if (e.name == '黔西南') {
				// 	this.model.localCode = 7
				// } else if (e.name == '黔东南') {
				// 	this.model.localCode = 8
				// } else if (e.name == '黔南') {
				// 	this.model.localCode = 9
				// }
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
				// this.artObj.funtype = n
				this.model.type = n
				console.log(this.artObj.funtype);
				// if (n === '黔俗') {
				// 	this.model.type = 0
				// } else if (n === '黔趣') {
				// 	this.model.type = 1
				// } else if (n === '黔味') {
				// 	this.model.type = 2
				// } else if (n === '亲子游') {
				// 	this.model.type = 3
				// } else if (n === '田园游') {
				// 	this.model.type = 4
				// } else if (n === '自驾游') {
				// 	this.model.type = 5
				// }
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .ql-blank::before {
		font-style: normal;
		color: #e0e0e0;
	}

	.checkActive {
		opacity: .8;
		background-color: #f1f0f0;
	}

	.add {
		padding: 30rpx;
		padding-bottom: 100rpx;

		.myEdit {
			background-color: #fff;
			border: 1rpx solid #d1d1d1;
			border-radius: 8rpx;
			min-height: 1000rpx;
			height: auto;
			padding: 30rpx;
		}

		.item {
			padding-bottom: 20rpx;

			.lf {
				display: flex;
				// align-items: center;
				color: #282828;
				font-size: 36rpx;
				display: flex;
				padding: 20rpx 0;

				.line {
					margin-right: 18rpx;
					// margin-top: 10rpx;
					width: 6rpx;
					// height: 32rpx;
					background-color: #6c5ddc;
				}
			}

			input,
			textarea {
				border: 1rpx solid #eee;
				height: 80rpx;
				padding: 0 20rpx;
			}

			textarea {
				height: 200rpx;
				width: 100%;
				box-sizing: border-box;
			}

			button {
				color: #fff;
				background: #6c5ddc;
			}

		}

		.tools {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			border-top: 1rpx solid #f4f4f4;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.iconfont {
				font-size: 36rpx;
				color: #333;

				&.active {
					color: #6c5ddc;
				}
			}
		}
	}
</style>
